baubs git
Commit fe2e68a4571c4e8c305f6f49d6fbfd11551c7127
Parents : c222167
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-12T21:43:45+01:00
feature: Update WorkflowStepper to use Zustand stores directly
Complete the component refactoring by updating WorkflowStepper to
consume stores directly instead of receiving props.
Changes:
- Updated WorkflowStepper to use useMachineStore and usePatternStore
- Removed 7 props that were being passed from App.tsx
- Added hasError import to WorkflowStepper
- Removed unused hasError import from App.tsx
Now all major components use Zustand stores directly:
- FileUpload: 0 props (was 14)
- ProgressMonitor: 0 props (was 9)
- PatternCanvas: 0 props (was 7)
- PatternSummaryCard: 0 props (was 5)
- WorkflowStepper: 0 props (was 7)
Total props eliminated: 42
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes
2 files changed, 36 insertions(+), 31 deletions(-)
Diff
diff --git a/src/App.tsx b/src/App.tsx
index be7e856..98ea17f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import { ProgressMonitor } from './components/ProgressMonitor';
import { WorkflowStepper } from './components/WorkflowStepper';
import { PatternSummaryCard } from './components/PatternSummaryCard';
import { BluetoothDevicePicker } from './components/BluetoothDevicePicker';
-import { hasError, getErrorDetails } from './utils/errorCodeHelpers';
+import { getErrorDetails } from './utils/errorCodeHelpers';
import { getStateVisualInfo } from './utils/machineStateHelpers';
import { CheckCircleIcon, BoltIcon, PauseCircleIcon, ExclamationTriangleIcon, ArrowPathIcon, XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/solid';
import './App.css';
@@ -320,15 +320,7 @@ function App() {
{/* Workflow Stepper - Flexible width column */}
<div>
- <WorkflowStepper
- machineStatus={machineStatus}
- isConnected={isConnected}
- hasPattern={pesData !== null}
- patternUploaded={patternUploaded}
- hasError={hasError(machineError)}
- errorMessage={machineErrorMessage || undefined}
- errorCode={machineError}
- />
+ <WorkflowStepper />
</div>
</div>
</header>
diff --git a/src/components/WorkflowStepper.tsx b/src/components/WorkflowStepper.tsx
index f55df37..b171d4e 100644
--- a/src/components/WorkflowStepper.tsx
+++ b/src/components/WorkflowStepper.tsx
@@ -1,17 +1,10 @@
import { useState, useRef, useEffect } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { useMachineStore } from '../stores/useMachineStore';
+import { usePatternStore } from '../stores/usePatternStore';
import { CheckCircleIcon, InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';
import { MachineStatus } from '../types/machine';
-import { getErrorDetails } from '../utils/errorCodeHelpers';
-
-interface WorkflowStepperProps {
- machineStatus: MachineStatus;
- isConnected: boolean;
- hasPattern: boolean;
- patternUploaded: boolean;
- hasError?: boolean;
- errorMessage?: string;
- errorCode?: number;
-}
+import { getErrorDetails, hasError } from '../utils/errorCodeHelpers';
interface Step {
id: number;
@@ -256,15 +249,35 @@ function getCurrentStep(machineStatus: MachineStatus, isConnected: boolean, hasP
}
}
-export function WorkflowStepper({
- machineStatus,
- isConnected,
- hasPattern,
- patternUploaded,
- hasError = false,
- errorMessage,
- errorCode
-}: WorkflowStepperProps) {
+export function WorkflowStepper() {
+ // Machine store
+ const {
+ machineStatus,
+ isConnected,
+ machineError,
+ error: errorMessage,
+ } = useMachineStore(
+ useShallow((state) => ({
+ machineStatus: state.machineStatus,
+ isConnected: state.isConnected,
+ machineError: state.machineError,
+ error: state.error,
+ }))
+ );
+
+ // Pattern store
+ const {
+ pesData,
+ patternUploaded,
+ } = usePatternStore(
+ useShallow((state) => ({
+ pesData: state.pesData,
+ patternUploaded: state.patternUploaded,
+ }))
+ );
+
+ const hasPattern = pesData !== null;
+ const hasErrorFlag = hasError(machineError);
const currentStep = getCurrentStep(machineStatus, isConnected, hasPattern, patternUploaded);
const [showPopover, setShowPopover] = useState(false);
const [popoverStep, setPopoverStep] = useState<number | null>(null);
@@ -383,7 +396,7 @@ export function WorkflowStepper({
aria-label="Step guidance"
>
{(() => {
- const content = getGuideContent(popoverStep, machineStatus, hasError, errorCode, errorMessage);
+ const content = getGuideContent(popoverStep, machineStatus, hasErrorFlag, machineError, errorMessage || undefined);
if (!content) return null;
const colorClasses = {
Served by rngit 1.4.2 - Generated in 0.1s